VOS - Ontwerp Wireframes

Een wireframe is een schets van de website, dat gebruikt als een prototype. In de wireframes worden zaken vastgelegd die te maken hebben met de gebruiksvriendelijkheid of usability. Uiteindelijk is het de bedoeling dat de website werkt op de manier zoals de de bezoekers zich dat inbeelden. Zij moeten er immers in werken. Wireframes kunnen snel en makkelijk gemaakt worden. Je kan ze tekenen terwijl de klant er bij is en er kan snel iets aangepast kan worden. Op die manier kunnen we verschillende layouts testen en kijken hoe een bezoeker daarop reageert.

Wat is een wireframe?

Wireframes en mockups

Structuur van de VOS pagina

De VOS app is een single page applicatie. Dit wil zeggen dat alle 'pagina's' op één html pagina staan. Meer uitleg daarover vind je op Single Page Application. Om de single page application te implementeren gebruiken wij het tower pattern.

We stellen de single page app voor als een appartementblok. Op elke verdieping is er plaats voor één tradionele webpagina. De VOS app bestaat uit verschillende verdiepingen. De gelijksvloer is bij manier van spreken de traditionele home pagina. En op de andere verdiepingen komen de andere pagina's te staan:

home/index pagina
fire/index pagina
psycho-social-index pagina
terror/index pagina
accident-index pagina
view-procedure pagina
home/loggingin pagina

In een traditionele website zouden dat allemaal aparte pagina's zijn. In een single page app zijn dat onderdelen van één enkele pagina. In het tower pattern gebruiken we een metafoor om dat concept te visueleseren, namelijk die van een flatgebouw waarbij een verdieping een traditionele pagina voorstelt. Elke verdieping beschikt over

een controlepaneel waarmee je van de ene verdieping naar de andere kan gaan;
en een show-room waarin de content van één traditionele pagina getoond kan worden;

MVC model

We gaan de VOS app als een MVC applicatie realiseren. Eén verdieping komt daarbij overeen met één view. Dus voor elke view maken we een wireframe. Let erop dat een view ook overeenstemt met een use case!